<template>
  <div>
    <div class="register">
      <el-form>
        <el-form-item>
          <el-input
            v-model="nickanme"
            placeholder="你的昵称"
            prefix-icon="el-icon-user-solid"
          ></el-input>
          <el-input
            v-model="phone"
            placeholder="手机号"
            prefix-icon="el-icon-mobile-phone"
            @focus="change"
          ></el-input>
          <el-input
            placeholder="验证码"
            v-model="yzcode"
            class=" nofocus"
            v-bind:class="{'codefouce':isfocus}"
            prefix-icon="el-icon-mobile-phone"
          >
          </el-input>
          <el-input
            v-model="pwd"
            placeholder="设置密码"
            prefix-icon="el-icon-lock"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            round
            style="width:100%"
            @click="register"
            :loading="isloading"
          >注册</el-button>
        </el-form-item>
      </el-form>
      <p class="xieyi">点击注册即表示您同意并愿意遵守简书用户协议和隐私政策</p>
      <div style="padding-top:15px">
        <el-divider class="divider">社交账号直接注册</el-divider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      nickanme: "",
      phone: "",
      pwd: "",
      yzcode: "",
      isfocus: false,
      isloading: false,
    };
  },
  methods: {
    change() {
      this.isfocus = true;
    },
    // 注册
    register() {
      this.isloading = true;
      let tel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      setTimeout(() => {
        if (
          this.nickanme == "" &&
          this.phone == "" &&
          this.yzcode == "" &&
          this.pwd == ""
        ) {
          this.$message({
            message: "注册信息不能为空",
            type: "warning",
          });
        } else if (this.nickanme == "") {
          this.$message({
            message: "昵称不能为空",
            type: "warning",
          });
        } else if (this.phone == "") {
          this.$message({
            message: "手机号不能为空",
            type: "warning",
          });
        } else if (this.yzcode == "") {
          this.$message({
            message: "验证码不能为空",
            type: "warning",
          });
        } else if (this.pwd == "") {
          this.$message({
            message: "密码不能为空",
            type: "warning",
          });
        } else if (!tel.test(this.phone)) {
          this.$message({
            message: "手机号码格式不正确",
            type: "warning",
          });
        } else {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.$router.push("/sign/login");
        }
        this.isloading = false;
      }, 1500);
    },
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 1rem;
}
.register {
  width: 75%;
  margin: 1.5rem auto;
}
.xieyi {
  width: 75%;
  margin: 0 auto;
  font-size: 13px;
  text-align: center;
}
.el-divider__text {
  font-size: 13px;
  color: gray;
}
.nofocus {
  display: none;
}
.codefouce {
  display: block;
}
</style>